<template>
  <tm-app ref="app">
    <tm-navbar :title="data.queryItem.title"></tm-navbar>
    <tm-tabs
      :list="departmentTypeList"
      align="around"
      :default-name="data.tabActive"
      :active-name="data.tabActive"
      activeColor="primary"
      activeFontColor="primary"
      _class="text-weight-b"
      itemModel="line"
      :showTabsLineAni="true"
      :width="750"
      @change="tabChanged"
    >
    </tm-tabs>
    <tm-sheet :margin="[0]" v-if="data.isLoading" class="flex1">
      <tm-skeleton-line :height='50'></tm-skeleton-line>
      <tm-skeleton-line :height='50'></tm-skeleton-line>
      <tm-skeleton-line :height='50'></tm-skeleton-line>
      <tm-skeleton-line :height='50'></tm-skeleton-line>
      <tm-skeleton-line :height='50'></tm-skeleton-line>
      <tm-skeleton-line :height='50'></tm-skeleton-line>
    </tm-sheet>
    <TmScrolly class="from-content" v-else>
      <personList :setList="data.listInfo" v-if="data.listInfo.length > 0"  @btnClick="goMenu"></personList>
      <tm-sheet v-else :margin="[0]">
        <tm-result :showBtn="false" subTitle=" " title="暂无数据"></tm-result>
      </tm-sheet>
    </TmScrolly>
    <view class="flex flex-row to-bottom" v-if="data.tabActive === 'members'">
      <view class="flex-1 mr16">
        <tm-button
          form-type="submit"
          icon="tmicon-plus"
          label="添加好友"
          color="#366EF4"
          @click="menuClick"
          block
        ></tm-button>
      </view>
      <view class="flex-1 mr16">
        <tm-button
          form-type="submit"
          icon="tmicon-plus"
          label="添加权限"
          color="#DCDCDC"
          fontColor="#15181D"
          outlined
          block
        ></tm-button>
      </view>
      <view class="flex-1">
        <tm-button
          form-type="submit"
          icon="tmicon-ellipsis-vertical"
          label=""
          outlined
          fontColor="#15181D"
          color="#DCDCDC"
          block
        ></tm-button>
      </view>
    </view>
  </tm-app>
  <formModal
    :show="show"
    :className="'center'"
    @close="close"
    :menuInfo="menuInfo!"
  />
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import * as config from '../config/menuOperate';
import personList from '../components/personList.vue'
import {departmentTypeList} from '../config/config'
import { InfoPortal } from '@/pages/Home/common/portalType'
import formModal from '../../../components/customModal/formModal.vue'
import relation from '../common/relation'
const data =  reactive<any>({
  listInfo: [],
  memberLength : 0,
  tabActive: 'members',
  isLoading:true,
  mainData : '',
  queryItem: ''
})
let show = ref<boolean>(false)
let menuInfo = ref<InfoPortal>()
onLoad(async(query) => {
  if (query && query.item) {
    let item = JSON.parse(query.item)
    data.queryItem = item
    let res = await config.loadSettingMenu();
    data.mainData = res
    if(item.itemType === 'member'){
      findObject(res.children,item.key)
    }else{
      findObject(res.children,item.key)
    }
  }
})
const menuClick = () => {
  menuInfo.value = relation.getSingleMode()
  openModal()
}
/** 打开弹窗 */
const openModal = () => {
  show.value = true
}

const close = () => {
  show.value = false
}
async function findObject(arr: any[],key: any) {
  arr.forEach((item) => {
    if(item.key === key) {
      getMenuList(item,key)
    }
    if(item.children && item.children.length > 0){
      findObject(item.children,key)
    }
  })
}
async function getMenuList(obj: { item: { directory: { memberDirectory: any; }; target: { members: any[]; }; }; children: any[]; },key: any) {
  uni.showLoading({
    title: '加载中...'
  })
  let arr:{
    label: any
    itemType: any
    icon: any
    remark: any
    isShow: boolean,
    key: any,
    code:any,
    createTime: any,
    updateTime: any
  }[] = []
  if(data.tabActive === 'members'){
    obj.item.target?.members?.forEach((element) => {
      let icon:any = null
      try{
        icon = JSON.parse(element.icon)
      }catch{
        icon = ''
      }
      let obj = {
        label:element.name,
        itemType:element.typeName,
        icon:icon.thumbnail,
        remark: element.remark,
        isShow:false,
        key:element.key,
        code: element.code,
        createTime: element.createTime,
        updateTime: element.updateTime
      }
      arr.push(obj)
    }) 
    data.listInfo = arr;
  }else{
    obj.children?.forEach((element) => {
      let obj = {
        label:element.label,
        itemType:element.item.target.metadata.typeName,
        icon:element?.item?.share?.avatar?.thumbnail,
        remark: element.remark,
        isShow:true,
        key:element.key
      }
      arr.push(obj)
    })
    data.listInfo = arr.filter((item) => {
      return item.itemType.includes(data.queryItem.label)
    })
  }
  setTimeout(() => {
    uni.hideLoading()
    data.isLoading = false
  }, 500)
}

function tabChanged(key: string) {
  data.tabActive = key
  findObject(data.mainData.children,data.queryItem.key)

}
async function goMenu(item: { key: any; label: any; type: any; mainKey: any; itemType: any; code: any; createTime: any; updateTime: any; remark: any; }) {
  const params = {
    title: item.label,
    typeName: item.itemType,
    key:item.key
  }
  if(data.tabActive === 'department'){
    uni.navigateTo({
      url: '/pages/relation/group/departList?item=' + JSON.stringify(params)
    })
  }else{
    const jsons = {
      name: item.label,
      typeName: item.itemType,
      code: item.code,
      createTime: item.createTime,
      updateTime:item.updateTime,
      remark: item.remark
    }
    uni.navigateTo({
      url: '/pages/relation/menuDetail?item=' + JSON.stringify(jsons)
    })
  }
  
}

</script>

<style lang="scss">
  .from-content {
    height: calc(100vh - 230px);
    overflow-y: scroll;
  } 
  .to-bottom {
    padding: 0px 10px;
    background-color: #fff;
    height: 80px;
    display: flex;
    align-items: center;
  }
  .mr16 {
    margin-right: 16px;
  }
  .flex1{
    flex: 1;
  }
</style>